<template>
  <div class="index" style="position: relative">
    <div class="A_top">
      <div class="A_top_left">
        <img src="../../../../public/images/900.png" />
      </div>
      <div class="A_top_right">
        <div class="l_top">
          <h1>{{ editval.tableComment }}({{ editval.tableName }})</h1>
          <p>{{ statusTitle }}</p>
        </div>
        <div class="l_bottom">数据目录:{{ childrenFun(this.treeList) }}&nbsp;&nbsp;&nbsp;&nbsp; 模型类型:{{ editval.modelType }}
        </div>
      </div>
      <div class="A_top_center">
        <el-button @click="offClick" style="width: 100px; height: 40px" type="success">返回</el-button>
      </div>
    </div>
    <div class="A_center"></div>
    <div class="A_bottom">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="产品信息" name="one">
          <el-descriptions :column="'2'">
            <!-- <el-descriptions-item label="储存位置">kooriookami</el-descriptions-item>
            <el-descriptions-item label="存储区域">18100000000</el-descriptions-item> -->
            <!-- <el-descriptions-item label="数据类型">{{ labelTitle }}</el-descriptions-item> -->
            <el-descriptions-item label="模型类型">{{ editval.modelType }}</el-descriptions-item>
            <el-descriptions-item label="生效时间">{{ $moment(new Date(editval.effectiveStartTime *
              1000)).format('YYYY-MM-DD 00-00-00') }}
              -
              {{ editval.effectiveEndTime == '无期限' ? '永久' : $moment(new Date(editval.effectiveEndTime *
                1000)).format('YYYY-MM-DD 00-00-00') }}</el-descriptions-item>
            <el-descriptions-item label="安全等级">{{ editval.tableSecurityLevel != null ?
              securityoptions[editval.tableSecurityLevel - 1].label : '' }}</el-descriptions-item>
            <el-descriptions-item label="相关实体对象">{{ editval.entity == null ? '无' : editval.entity
              }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="'1'">
            <el-descriptions-item label="创建人">{{ editval.createBy }}</el-descriptions-item>
            <!-- <el-descriptions-item label="参与数据标准">{{ editval.description }}</el-descriptions-item> -->
            <!-- <el-descriptions-item label="责任部门">{{ editval.description }}</el-descriptions-item>
            <el-descriptions-item label="描述">{{ editval.description }}</el-descriptions-item>
            <el-descriptions-item label="分类">
              <el-tag size="small">分类</el-tag>
            </el-descriptions-item> -->
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="数据结构" name="tow">
          <ul style="display: flex; list-style: none; align-items: center; justify-content: space-between">
            <li>字段信息</li>
            <li>
              <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                <el-button slot="append" @click="seachColumn" icon="el-icon-search"></el-button>
              </el-input>
            </li>
          </ul>
          <el-table :data="editval.columnModelEntities" height="500px" style="width: 100%; height: 90%; overflow: auto">
            <!-- <el-table-column label="字段编码" width="180"> </el-table-column> -->
            <el-table-column fixed prop="columnName" label="英文名称"> </el-table-column>
            <el-table-column fixed prop="columnComment" label="中文名称"> </el-table-column>
            <el-table-column prop="columnType" label="字段类型"> </el-table-column>
            <el-table-column prop="dataLength" label="长度"> </el-table-column>
            <el-table-column prop="forginId" label="外键">
              <template slot-scope="{ row }">
                {{ row.forginId != null ? anquanions.filter((e) => e.value == row.forginId)[0].label : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="columnNullable" label="字段是否允许为空">
              <template slot-scope="{ row }">
                {{ row.columnNullable != null ? anquanions.filter((e) => e.value == row.columnNullable)[0].label : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位"> </el-table-column>
            <el-table-column prop="dataDefault" label="默认值"> </el-table-column>
            <el-table-column prop="isKV" label="是否键值">
              <template slot-scope="{ row }">
                {{ row.isKV != null ? anquanions.filter((e) => e.value == row.isKV)[0].label : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="columnSecurityLevel" label="安全等级">
              <template slot-scope="{ row }">
                {{ row.columnSecurityLevel != null ? securityoptions[row.columnSecurityLevel - 1].label : '' }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="" label="关键字典表" > </el-table-column>
            <el-table-column prop="" label="关联字典字段" > </el-table-column>
            <el-table-column prop="" label="值域标识" > </el-table-column> -->
            <el-table-column prop="dataType" label="数据类型"> </el-table-column>
          </el-table>
          <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" :page-sizes="pageArray" /> -->
        </el-tab-pane>
        <!-- <el-tab-pane label="查看详情" name="three">
          <el-table ref="table" :key="tableKey" v-loading="listLoading" element-loading-text="正在加载，请稍后" :data="list"
            border fit highlight-current-row style="width: 100%" max-height="400px">
            <el-table-column v-for="(item, index) in headList" :label="item" min-width="150px">
              <template slot-scope="{ row }">
                <span>{{ row[item] }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
            :page-sizes="pageArray" @pagination="setList" />
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { labelEntityList } from '@/api/metadata/entity'
import { getDetail } from '@/api/masterdata/detailTable'
import { detailtableLise } from '@/api/masterdata/dataModelApi'

import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination,
  },

  props: ['lookobj', 'treeList', 'list'],
  data() {
    return {
      tableKey: 0,
      list: [],
      headList: [],
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: this.$store.getters.defaultPageSize,
        coreDataModel: 1,
      },
      temp: {},
      total: 0,
      entityeData: [],
      tableEntityId: '', //实体Id
      pageArray: this.$store.getters.pageArray,
      title: '',
      anquanions: [
        {
          label: '是',
          value: 1,
        },
        {
          label: '否',
          value: 0,
        },
      ],
      input3: '',
      pageArray: this.$store.getters.pageArray,
      securityoptions: [
        { label: '机密', value: 1 },
        { label: '秘密', value: 2 },

        { label: '内部公开', value: 3 },
        {
          label: '外部公开',
          value: 4,
        },
      ],
      listQuery: {
        tableId: undefined,
        tableName: undefined,
        page: 1,
        coreDataModel: 1,
        limit: this.$store.getters.defaultPageSize,
      },
      total: 0,
      editval: {},
      statusTitle: '',
      dataName: '',
      modelLabel: '',
      activeName: 'one',
      statusoptions: [
        { label: '已发布', value: '0' },
        { label: '废止', value: '1' },
        { label: '草稿', value: '2' },
      ],
      typeoptions: [
        {
          value: '监测数据',
          label: '监测数据',
        },
        {
          value: '普通数据',
          label: '普通数据',
        },
        {
          value: '多媒体数据',
          label: '多媒体数据',
        },
        {
          value: '空间数据',
          label: '空间数据',
          children: [
            {
              value: '影响数据',
              label: '影响数据',
            },
            {
              value: '三维数据',
              label: '三维数据',
            },
            {
              value: '矢量数据',
              label: '矢量数据',
            },
          ],
        },
      ],
      labelTitle: '',
      modelTypeoptions: [
        {
          value: '关联表',
          label: '关联表',
          children: [
            {
              value: '业务数据表',
              label: '业务数据表',
            },
            {
              value: '基础数据表',
              label: '基础数据表',
            },
          ],
        },
        {
          value: '普通表',
          label: '普通表',
          children: [
            {
              value: '基础数据表',
              label: '基础数据表',
              children: [
                {
                  value: '实体编码表',
                  label: '实体编码表',
                },
                {
                  value: '基础信息表',
                  label: '基础信息表',
                },
              ],
            },
          ],
        },
        {
          value: '字典表',
          label: '字典表',
        },
      ],
    }
  },
  watch: {
    lookobj: {
      deep: true,
      immediate: true,
      handler(newval, oldval) {
        if (newval) {
          this.editval = newval
          this.getList(newval.id)
          this.statusoptions.map((v, i) => {
            if (v.value == newval.releaseStatus) {
              this.statusTitle = v.label
            } else {
              return
            }
          })

          this.typeoptions.map((v, i) => {
            if (v.value == newval.dataType) {
              this.labelTitle = v.label
            } else {
              return
            }
          })
        }

      }
    }
  },
  mounted() { },
  methods: {
    seachColumn() {
      detailtableLise({
        params: {
          id: this.editval.id,
          condition: this.input3,
        },
      }).then((res) => {
        this.editval = res.data.data
      })
    },
    setList() {
      getDetail(this.listQuery).then((res) => {
        console.log(res, '列信息')
        if (res.data.code == 200) {
          this.headList = res.data.data.columnNameList
          this.list = res.data.data.pageResult.data
          this.total = res.data.data.pageResult.total
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    rest() {
      this.listQuery = {
        pageNum: 1,
        pageSize: this.$store.getters.defaultPageSize,
        coreDataModel: 1,
      }
    },
    getList(data) {
      this.rest()
      this.listQuery.tableId = data
      labelEntityList(data).then((res) => {
        if (res.data.code == 200) {
          this.entityeData = res.data.data
          console.log(this.entityeData)
        }
      })
    },
    handRest() {
      this.listQuery.tableEntityId = ''
      this.setList()
    },
    choseName(id) {
      this.setList()
    },
    handleClick(tab, event) {
      // if (tab._props.name == 'three') {
      //   getDetail(this.listQuery).then((res) => {
      //     console.log(res, '列信息')
      //     if (res.data.code == 200) {
      //       this.headList = res.data.data.columnNameList
      //       this.list = res.data.data.pageResult.data
      //       this.total = res.data.data.pageResult.total
      //     } else {
      //       this.$message.error(res.data.msg)
      //     }
      //   })
      // }
    },
    offClick() {
      this.$emit('offFunValue')
    },
    childrenFun(value) {
      value.forEach((v, i) => {
        if (v.id == this.editval.directoryId) {
          this.label = v.label
        } else if (v.children.length && v.children) {
          this.childrenFun(v.children)
        }
      })
      return this.label
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep(::-webkit-scrollbar) {
  display: block;
}

.pagination-container {
  margin-top: 0 !important;
}

.index {
  width: 100%;
  height: 100%;

  .A_top {
    width: 100%;
    background: white;
    display: flex;
    padding: 10px;
    border: 1px solid rgb(223, 230, 236);

    .A_top_left {
      img {
        padding: 37px;
      }
    }

    .A_top_right {
      flex: 1;
      height: 100%;

      .l_top {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;

        p {
          width: 60px;
          height: 30px;
          text-align: center;
          background: blue;
          color: white;
          line-height: 30px;
        }
      }

      .l_bottom {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
      }
    }

    .A_top_center {
      width: 10vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  .A_center {
    width: 100%;
    height: 10px;
    background: white;
  }

  .A_bottom {
    width: 100%;
    height: 85%;
    overflow: auto;
    padding: 20px;
    border: 1px solid rgb(223, 230, 236);
    background: white;
  }
}
</style>
